<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="UTF-8">
        <title>vue事件绑定练习</title>
    </head>
    <body>

    <div id="app">
        <button v-on:click="addOne()">{{message1}}</button>
        <button v-on:click="addTwo()">{{message2}}</button>
        <p>你的按钮被点击了{{num}}次</p>
    </div>

    <script src="vue.js"></script>
    <script type="text/javascript">
        let vm = new Vue({
            el:"#app",
            data:{
                message1:"点击增加+1",
                message2:"点击增加+2",
                num:0,
                message3:`你的按钮被点了次`
            },
            //methods 对应的值是一个对象{}，可以理解成方法池
            methods:{
                addOne() {
                    //因为data和methods在同一个Vue实例中，所以可以使用this.属性名来访问和修改属性值
                    this.num = this.num + 1
                    console.log("+1")
                },
                addTwo() {
                    this.num = this.num + 2
                    console.log("+2")
                }
            }
        })
    </script>
    </body>
</html>